<template>
    <div class="hotCenter">
        <div class="serviceContent">
            <div class="service_top">
                <div class="service_topLeft">
                    <input type="text" class="service_input" placeholder="有问题？快点我搜搜~" onkeyup="checkInputContent(this);"/>
                    <a class="service_serBtn">搜索</a>
                    <span style="display:none;"></span>
                </div>
                <ul class="service_topRight">
                    <li><div><img src="../../../images/service_img/lxkf.png"/><span>联系客服</span></div></li>
                    <li><div><img src="../../../images/service_img/bdsj.png"/><span>绑定手机</span></div></li>
                    <li><div><img src="../../../images/service_img/zhmm.png"/><span>找回密码</span></div></li>
                    <li><div><img src="../../../images/service_img/yjfk.png"/><span>意见反馈</span></div></li>
                </ul>
            </div>
            <!--问题名称和标题-->
            <div class="service_questionList">
                <div class="service_questionLeft">
                    <div class="service_questionTitle">
                        <div>
                            <img src="../../../images/service_img/redianwenti.png"/>
                            <span>热点问题</span>
                        </div>
                    </div>
                    <div class="service_questionTitle">
                        <div>
                            <img src="../../../images/service_img/zhifuwenti.png" />
                            <span>支付问题</span>
                        </div>
                    </div>
                    <div class="service_questionTitle">
                        <div>
                            <img src="../../../images/service_img/ios.png" />
                            <span>iOS版问题</span>
                        </div>
                    </div>
                    <div class="service_questionTitle">
                        <div>
                            <img src="../../../images/service_img/gongnengshiyong.png" />
                            <span>功能使用</span>
                        </div>
                    </div>
                </div>
                <div class="service_questionRight">
                    <ul class="service_questionShow">
                        <li v-for="(item,index) in redianData">
                            <div class="question_title questionRedian_title" @click="listClick($event,index,'questionRedian_title')"><span>{{item.Title}}</span></div>
                            <div class="question_describe" style="display:none;">
                                <div class="question_titleDes" v-html="item.Content"></div>
                                <div class="isHelp">
                                    <span>是否对您有帮助：</span>
                                    <b class="userful" :hotspotissueID="item.ID" @click="userfulClick($event)">有用</b>
                                    <b class="noUserful" :hotspotissueID="item.ID" @click="userfulClick($event)">没用</b>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="service_questionShow">
                        <li v-for="(item,index) in payData">
                            <div class="question_title questionPay_title" @click="listClick($event,index,'questionPay_title')"><span>{{item.Title}}</span></div>
                            <div class="question_describe" style="display:none;">
                                <div class="question_titleDes" v-html="item.Content"></div>
                                <div class="isHelp">
                                    <span>是否对您有帮助：</span>
                                    <b class="userful" :hotspotissueID="item.ID" @click="userfulClick($event)">有用</b>
                                    <b class="noUserful" :hotspotissueID="item.ID" @click="userfulClick($event)">没用</b>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="service_questionShow">
                        <li v-for="(item,index) in iosData">
                            <div class="question_title questionIos_title" @click="listClick($event,index,'questionIos_title')"><span>{{item.Title}}</span></div>
                            <div class="question_describe" style="display:none;">
                                <div class="question_titleDes" v-html="item.Content"></div>
                                <div class="isHelp">
                                    <span>是否对您有帮助：</span>
                                    <b class="userful" :hotspotissueID="item.ID" @click="userfulClick($event)">有用</b>
                                    <b class="noUserful" :hotspotissueID="item.ID" @click="userfulClick($event)">没用</b>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="service_questionShow">
                        <li v-for="(item,index) in funData">
                            <div class="question_title questionFun_title" @click="listClick($event,index,'questionFun_title')"><span>{{item.Title}}</span></div>
                            <div class="question_describe" style="display:none;">
                                <div class="question_titleDes" v-html="item.Content"></div>
                                <div class="isHelp">
                                    <span>是否对您有帮助：</span>
                                    <b class="userful" :hotspotissueID="item.ID" @click="userfulClick($event)">有用</b>
                                    <b class="noUserful" :hotspotissueID="item.ID" @click="userfulClick($event)">没用</b>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--搜索内容-->
            <div class="service_serContent" style="display: none;">
                <div class="service_showSerQestion">
                    <ul v-if="serData.length!=0" class="service_ullist">
                        <li v-for="(item,index) in serData">
                            <div class="question_title serQuestion_title" :id="item.ID" @click="listClick($event,index,'serQuestion_title')"><span>{{(index + 1) + '、' + item.Title}}</span></div>
                            <div class="question_describe" style="display:none;">
                                <div class="question_titleDes" v-html="item.Content"></div>
                                <div class="isHelp">
                                    <span>是否对您有帮助：</span>
                                    <b class="userful" :hotspotissueID="item.ID" @click="userfulClick($event)">有用</b>
                                    <b class="noUserful" :hotspotissueID="item.ID" @click="userfulClick($event)">没用</b>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div v-if="serData.length == 0" class="service_noSerResult">
                        <img src="../../../images/service_img/noResult.png" />
                        <p>搜不到您要查找的问题！您可以去反馈问题哦，我们会收集您的提问并解决</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {hotspotissue} from '../../../config/getData'
    export default {
        name: "services",
        data: function() {
            return {
                serviceData:'',
                redianData:'',
                payDataserviceData:serviceData,
                redianData:serviceData['热点问题'],
                payData:serviceData['支付问题'],
                iosData:serviceData['iOS版问题'],
                funData:serviceData['功能使用'],
                serData:[]

            }
        },
        methods:{
            listClick:function(el,index,str){
                $('.' + str).eq(index).parent().find('.question_describe').toggle();
            },
            userfulClick:function(el){
                var hotspotissueID = el.target.getAttribute('hotspotissueID');
                var userText = el.target.innerHTML;
                var _isUserful = 0;
                if(userText == '有用'){
                    _isUserful = 1;
                }
                isUserful(_isUserful,hotspotissueID);
            },
            showQuestion:function () {
                let questionData = {
                    '热点问题':[],
                    '支付问题':[],
                    'iOS版问题':[],
                    '功能使用':[]
                };
                hotspotissue().then(res=>{

                    if(res.status===200){
                        let result = JSON.parse(res).data;
                        for(var i = 0; i < result.length; i ++){
                            if(result[i].ClassName == '热点问题'){
                                questionData['热点问题'].push(result[i]);
                            }else if(result[i].ClassName == '支付问题'){
                                questionData['支付问题'].push(result[i]);
                            }else if(result[i].ClassName == 'iOS版问题'){
                                questionData['iOS版问题'].push(result[i]);
                            }else if(result[i].ClassName == '功能使用'){
                                questionData['功能使用'].push(result[i]);
                            }
                        }
                    }
                    console.log(questionData)
                })
            }
        },
        mounted:function () {
            this.showQuestion();
        }
    }
</script>

<style scoped lang="less">
    @main_color:#5bb8ff;
    @white:#fff;
    @green_color:#66cc80;
    @yellow_color:#ffb73e;
    @red_color:#fc7a7e;
    @black:#000;
    @color_6:#666;
    @color_3:#333;
    @color_d:#ddd;
    @color_df:#dfdfdf;
    @color_9:#999;
    @color_f3:#f3f3f3;
    .hotCenter{
        height: 100%;
        overflow: auto;
        .serviceContent{
            height: 100%;
        }
        i{
            font-style: normal;
        }
    }
</style>
